<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html lang="en-us">
<head>
<style type="text/css">
#jsfdump-console {
	border: 1px solid red;
	width: 550px;
	height: 450px;
}

#jsfdump-footer {
	padding: 5px;
}

.box {
	padding: 3px 6px 3px 6px;
	border: 1px solid #000;
	margin-right: 5px;
	text-decoration: none;
	color: #595959;
}
</style>

<style type="text/css">
.jsfdump {
	font-size: 90%;
	font-weight: normal;
	font-family: Lucida Console, Arial, Sans-serif;
}

.jsfdump .box {
	padding: 0px 3px 0px 3px;
	border: 1px solid #CBCBCB;
	margin-right: 5px;
	text-decoration: none;
	color: #595959;
}

.jsfdump table {
	border-spacing: 0px;
}

.jsfdump dt {
	padding: 0px;
	padding-left: 0px;
	list-style: none;
	margin: 0px;
}

.jsfdump dd {
	font-weight: normal;
	color: #000;
	margin-left: 1em;
}

.jsfdump dl {
	margin: 0px;
}

.jsfdump .object {
	color: #B31709;
	font-weight: bold;
}

.jsfdump .collection {
	color: #948D06;
	font-weight: bold;
}

.jsfdump .array {
	color: #948D06;
}

.jsfdump  .array-index {
	color: #000;
	font-weight: bold;
	vertical-align: top;
}

.jsfdump .field {
	color: #595959;
}

.jsfdump .map {
	color: #D97D4A;
}


/* BEAN ITEMS*/

.jsfdump-beanlist{
	 list-style:none;
	 padding:0px;
	 margin:0px;
	 width:100%;
}

.jsfdump-beanlist-item{
}
	

.jsfdump-scope-implicit{
 color:red;
}

.jsfdump-scope-application{
 color:blue;
}

.jsfdump-scope-request{
 color:black;
}


.jsfdump-scope-session{
 color:green;
}
	
/* sugesstion container */

.jsfdump-sugesstion{
position:relative;
	 clear:both;
	 list-style:none;
	 padding:0px;
	 margin:0px;
	 width:100%;
}

.jsfdump-sugesstion-item{
float:left;
margin-right:10px;
}
	
.jsfdump-lifecycle-phase{
 font-size:.8em;
 list-style:none;
 padding:0px;
 margin:0px;
 width:100%;
}

</style>
<script type="text/javascript">
//<![CDATA[
function toggleCollectionView(owner){
	if(owner == null  || owner.childNodes == null){
		return null;
	}	
	var pa=owner.parentNode;
	while(pa.tagName.toUpperCase()!='DL'){
		pa=pa.parentNode;
	}	
	var foundNode=null;
	var cNodes=pa.childNodes;
	for(var i=0;i<cNodes.length;i++){
		var node=cNodes[i];
			if(node.nodeName.toUpperCase()=='DD'){	
				foundNode = node; 
				break;
			}
	}  	
	var visible=foundNode.style.display;
	if(visible==''){
		foundNode.style.display='none';
		owner.innerHTML="+";
	}else{
		foundNode.style.display='';
		owner.innerHTML="-";
	}
}

function focusRef(refId){
	var animateRef=function(obj){
		var style=obj.style;
		 var opacity=.0;
		 var tm=0;
		 var index=.1;
		 tm = setInterval(function(){
			if(index>10){
				style.backgroundColor="FFFFFF";
				clearInterval(tm);
				return;
			}
			//IE / FF support
			style.filter = 'alpha(opacity=' + opacity * 100 + ')';
			style.opacity = opacity;
			opacity+=.1;
			style.backgroundColor="FCFE6C";		
			index++;
		 }, 150);
	};

 var inputs=document.getElementsByTagName('TABLE');//ALWAYS USE CAPS
  for(var i=0;i<inputs.length;i++){
  	var tbl=inputs[i];
	var objRefId=tbl.getAttribute('objRefId');
	if(objRefId && objRefId==refId){
		var position=findPos(tbl);
		var container=findParentContainer(tbl);
		container.scrollTop=position[0];
		animateRef(tbl);		
		/*
		var a=document.createElement("A");
		a.href="javascript:void(0);";
		a.innerHTML="Hello";
		tbl.appendChild(a);		
		*/
	}
  }	  
}

/*
 * Find main div container
 */
 function findParentContainer(owner) {
	var pa=owner.parentNode;
	while(pa.tagName.toUpperCase()!='DIV'){
		pa=pa.parentNode;
	}	
	return pa;
}

/*
 *Find component XY coordinates
 */
 function findPos(obj) {
	var curleft = curtop = 0;
	if (obj.offsetParent) {
		do {
				curleft += obj.offsetLeft;
				curtop += obj.offsetTop;
	 
		} while (obj = obj.offsetParent);
    }
 	return [curleft,curtop];
}

//]]>
</script>


<link rel="stylesheet" type="text/css" media="screen" href="tabs.css" />
<script type='text/javascript' src='prototype.js'></script>
<script type='text/javascript' src='tabs.js'></script>

<script type="text/javascript">
//<![CDATA[
	var MyTabs = null;
			var ActivateTabs=function(){
				if(typeof(MT)=='undefined'){
					MyTabs= new mt('tabs','div.my_tab');
				
					MyTabs.removeTabTitles('h5.tab_title');
					MyTabs.addTab('t1','Console');
					MyTabs.addTab('t2','Bean Manager');
					MyTabs.addTab('t3','Lifecycle');
					MyTabs.addTab('t4','About');
					MyTabs.makeActive('t1');
				}
			}	

var init=function(){

var handleInput=function(evt) {
	if(evt.type == 'keyup' && evt.keyCode!=13){
		handleInputSuggest(evt);
	}else{	
	   handleInputEvaluate(evt);
	}
}

var lastLookup="";
var handleInputSuggest=function(evt) {	
	var url='http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.dumpObjectProperties}'
	var lookup;
	var exp=$("jsfdump-expression").value;
	//Checks if the user have ${ typed in
	var startRegex = /\${\B/
	if(exp.match(regexp)!=null){
		lookup=exp;
		
	}

	//Matcheds ${property.  
	var regexp = /\${((.*?)\.)+/
	
	if(exp.match(regexp)!=null){
		lookup=exp.match(regexp)[0];
		//Replace last . with } so we can evaluate ${bean.prop} , should fix that via regex		
		lookup=lookup.substring(0,lookup.length-1)+"}";
	}else{
		return;
	}
	
	if(lookup==lastLookup){
		return;
	}
	//http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.dumpObjectProperties}&p1=${beeHive.honey}
	new Ajax.Request(url,
	{
	 method:'get',
	 parameters:{p1:lookup},
	 onSuccess: function(transport){
	   var response = transport.responseText;
		 var container=$("jsfdump-suggestion");
		 var items=response.split(",");
		    var str=[];
			str[str.length] = "<ul class='jsfdump-sugesstion'>";
			items.each(function(item){
			   
			   	str[str.length] = "<li  class='jsfdump-sugesstion-item'>";
				str[str.length] = "<a href='javascript:void(0);' onclick=\"evalExpresession('"+item+"')\" >";
				str[str.length] = item;
				str[str.length] = "</a>";
				str[str.length] = "</li>";
			   });
			   
			str[str.length] = "</ul>";			    
			container.innerHTML=str.join("");	
		
	   },
	 onFailure: function(){ alert('Something went wrong...')}
    });

	lastLookup=lookup;		
}

var handleInputEvaluate=function(evt) {

	var exp=$("jsfdump-expression").value;
	//var url='http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.dump}&p1=${beeHive.honey}';
	var url='http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.dump}';
	new Ajax.Request(url,
	{
	 method:'get',
	 parameters:{p1:exp},
	 onSuccess: function(transport){
	   var response = transport.responseText;
	   $('tab1-container').innerHTML=response;
	   //console.info(response);
	   },
	 onFailure: function(){ alert('Something went wrong...')}    
    });

};
		 
	var handleScopeTypeClick=function(chkbox){
		var target=arguments[0].target;
		var checkedItems=[];
		var f = $('jsfdump-scopes-form');
		checkboxes = f.getInputs('checkbox');
		checkboxes.each(function(chkbox){ 
			if(chkbox.checked){
				checkedItems.push(chkbox.value);
			}
		});
		var url='http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.dumpResolvableProperties}';
			new Ajax.Request(url,
			{
			 method:'get',
			 parameters:{p1: checkedItems.toString()},
			 onSuccess: function(transport){
			   var response = transport.responseText;
			   var container=$('tab2-container');
			  //container $('tab2-container').innerHTML=response;
			   var str=[];
			   str[str.length] = "<ul class='jsfdump-beanlist'>";
			   var items=response.split(",");
			   items.each(function(item){
			    var sItem=item.split(":");
				var itemName=sItem[0].trim();
				var itemScope=sItem[1];
				str[str.length] = "<li  class='jsfdump-beanlist-item'>";
				str[str.length] = "<a href='javascript:void(0);' onclick=\"evalExpresession('"+itemName+"')\" class='jsfdump-scope-"+itemScope+"'>"
				str[str.length] = itemName
				str[str.length] = "</a>";
class="jsfdump-scope-application"			

			str[str.length] = "</li>";
			   });
				str[str.length] = "</ul>";			    
				container.innerHTML=str.join("");				
			   },
			 onFailure: function(){ alert('Something went wrong...')}
		});
	};
		  
	document.observe('dom:loaded', function() {
		$("jsfdump-eval").observe("click", handleInput);
		$("jsfdump-eval").observe("click:on", handleInput);
		
		$("jsfdump-expression").observe("keyup", handleInput);
		
		var f = $('jsfdump-scopes-form');
		checkboxes = f.getInputs('checkbox');
		checkboxes.each(function(chkbox){ 
			$(chkbox).observe("click", handleScopeTypeClick);
		});
		
	//jsf-dump-lifecycle-interval
			
		//LifeCycle
		$("jsfdump-lifecycle-start").observe("click", handleLifecycleStartMonitor);
		$("jsfdump-lifecycle-end").observe("click", handleLifecycleEndMonitor);
				
	});
	
	var lifecycleUpdateCycle=0;
	var lifecycleUpdateInterval=0;
	var handleLifecycleStartMonitor=function(e){
		lifecycleUpdateCycle=$("jsfdump-lifecycle-interval").value;
		lifecycleUpdateCycle=lifecycleUpdateCycle*1000;
			
		var updateLifecycle=function(){	
			var url='http://localhost:8080/JSFDumpDemo/jsfdump/ajax/ajaxHandler.jsf?exp=${ajaxHandler.showEvents}';
			new Ajax.Request(url,
			{
			 method:'get',
			 parameters:{p1:$("jsfdump-lifecycle-filter").value},
			 onSuccess: function(transport){
			   var response = transport.responseText;
			   $('tab3-container').innerHTML=response;
			  },
			 onFailure: function(){ alert('Something went wrong...')}    
			});
		}
		lifecycleUpdateInterval = setInterval(updateLifecycle, lifecycleUpdateCycle);
	};
	
	
	var handleLifecycleEndMonitor=function(e){
		clearInterval(lifecycleUpdateInterval);
	};
	
	
	
}();

function evalExpresession(item){
	var exp="${"+item+"}";
	$("jsfdump-expression").value=exp;
	$('jsfdump-eval').fire('click:on');
	
	//@TODO: Fix tab switching
	//MyTabs.makeActive('t1');
}

 function updatePhaseGraph(times){	
 var surl="http://chart.apis.google.com/chart?cht=p3&chd=t:"+times+"&chs=500x100&chl=RESTORE_VIEW|APPLY_REQUEST_VALUES|PROCESS_VALIDATIONS|UPDATE_MODEL_VALUES|INVOKE_APPLICATION|RENDER_RESPONSE";
    $("jsfdump-phase-graph").src=surl;
 };
 //]]>
</script>

</head>
<body>

<div id="jsfdump-console">
<!--
				<div style="position:relative; margin-left:95%; margin-top:-10px;"><a class="box" onclick="toggleCollectionView(this);" href="javascript:void(0);">-</a></div>
-->
<div id="tabs">
<div id="t1" class="my_tab">

<div id="tab1-container" style="padding:5px;  height:355px; overflow: auto">
Type  EL expression in form ${exp} to evaluate
</div>

<!--jsfdump-content-->
<div id="jsfdump-footer">
<input type="text"	id="jsfdump-expression" name="jsfdump-expression" value="El Expression"	style="width: 380px"></input> <input type="button" name="jsfdump-eval"
	id="jsfdump-eval" value="Eval" style="width: 100px"></input>
	<div id="jsfdump-suggestion-container">&nbsp;<div id="jsfdump-suggestion" style="float:left"></div></div>
</div>

</div><!--//t1-->
<div id="t2" class="my_tab">
<form id="jsfdump-scopes-form">

<input type="checkbox" name="jsfdump-scopetype" id="jsfdump-scopetype-implicit" value="implicit"/>
<label for="jsfdump-scopetype-implicit"  class="jsfdump-scope-implicit"> Implicit</label>

<input type="checkbox" name="jsfdump-scopetype" id="jsfdump-scopetype-request" value="request"/>
<label for="jsfdump-scopetype-request" class="jsfdump-scope-request"> Request</label>

<input type="checkbox" name="jsfdump-scopetype" id="jsfdump-scopetype-session" value="session"/>
<label for="jsfdump-scopetype-session" class="jsfdump-scope-session">Session</label>

<input type="checkbox" name="jsfdump-scopetype" id="jsfdump-scopetype-application" value="application"/>
<label for="jsfdump-scopetype-application" class="jsfdump-scope-application"> Application </label>

</form>

	<div id="tab2-container" style="padding:5px; height: 380px; overflow: auto">
	Managed Beans
	</div>


</div>

<div id="t3" class="my_tab">
<div>Refresh Interval : 

<select id="jsfdump-lifecycle-interval">
<option value="5">5 Sec</option>
<option value="10">10 Sec</option>
<option value="15">15 Sec</option>
<option value="20">20 Sec</option>
</select>
 <input type="button" 	id="jsfdump-lifecycle-start" value="Start Monitoring" style="width: 100px"></input>
  <input type="button" 	id="jsfdump-lifecycle-end" value="Stop Monitoring" style="width: 100px"></input>

</div>

 <div> Filter : <input type="text"	id="jsfdump-lifecycle-filter"  value=""	style="width: 380px"></input>  </div>

  	<div id="tab3-container" style="padding:5px; height: 255px; overflow: auto">	  
	</div>
	
	 <div id="element">
	   <img id ="jsfdump-phase-graph" src="" alt="graph"/>
	 </div>
</div>


<div id="t4" class="my_tab">
 <h1>JSFConsole 1.0 developed by Greg Bugaj</h1>  
</div><!--//t4-->

</div>


</div>

<script type="text/javascript">
    	ActivateTabs();
</script>

</body>
</html>


